<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 短缺分析
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="queryInfo.d_wid" placeholder="仓库号" class="handle-select mr10">
          <el-option key="1" label="仓库1" value="1"></el-option>
          <el-option key="2" label="仓库2" value="2"></el-option>
          <el-option key="3" label="仓库3" value="3"></el-option>
          <el-option key="4" label="仓库4" value="4"></el-option>
          <el-option key="5" label="仓库5" value="5"></el-option>
        </el-select>&nbsp;
        <el-input v-model="queryInfo.gcategory" placeholder="请输入货品种类" class="ac" />&nbsp;&nbsp;
        <el-input v-model="queryInfo.gid" placeholder="请输入货品编号" class="ac" />&nbsp;&nbsp;
        <el-input v-model="queryInfo.gname" placeholder="请输入货品名称" class="ac" />&nbsp;&nbsp;
        <el-input v-model="queryInfo.gmodel" placeholder="请输入规格型号" class="ac" />&nbsp;&nbsp;




        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>


      <el-table :data="pb.list" border class="table" ref="multipleTable" header-cell-class-name="table-header">

        <el-table-column fixed prop="d_wid" label="仓库" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="gid" label="货品编号" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="gcategory" label="货品种类" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="gname" label="货品名称" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="gmodel" label="规格型号" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="dnumber" label="当前库存" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="dlower" label="库存下限" width="200" align="center"></el-table-column>
        <el-table-column fixed prop="dlowernumber" label="短缺量量" width="200" align="center"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="pb.currentPage"
          :page-size="pb.pageSize" :total="pb.totalCount" @current-change="handlePageChange"></el-pagination>
      </div>

    </div>


  </div>
</template>
  
<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";



export default {
  name: "basetable",
  setup() {

    const queryInfo = ref({
      d_wid: '',
      gid: '',
      gcategory: '',
      gmodel: '',
      gname: '',
      currentPage: 1,
      pageSize: 6,
    })

    let pb = ref({
      currentPage: 1,
      pageSize: 6,
      list: [],
      totalPage: 0,
      totalCount: 0,
    })

    // 发起一个post请求
    axios({
      method: 'post',
      url: 'http://localhost:8080/api/lowerServlet',
      data: queryInfo.value
    }).then(function (resp) {

      pb.value = resp.data.data

      console.log(pb.value)
      console.log(resp.data.data)
    });

    const search = () => {

      axios({
        method: 'post',
        url: 'http://localhost:8080/api/lowerServlet',
        data: queryInfo.value
      }).then(function (resp) {
        pb.value = resp.data.data
        console.log(pb.value)
        console.log(resp.data.data)


      });
    }

    //跳转分页
    const handlePageChange = (val) => {
      queryInfo.currentPage = val;
      axios({
        method: 'post',
        url: 'http://localhost:8080/api/lowerServlet',
        data:
        {
          s_wid: queryInfo.value.s_wid,
          gmodel: queryInfo.value.gmodel,
          gname: queryInfo.value.gname,
          sdate1: queryInfo.value.sdate1,
          sdate2: queryInfo.value.sdate2,
          currentPage: val,
          pageSize: queryInfo.value.pageSize,
        }
      }).then(function (resp) {
        pb.value = resp.data.data
        console.log(pb.value)
      });
    }

    //重置
    const flush = () => {
      window.location.reload()
    }


    return {
      queryInfo,
      pb,
      search,
      handlePageChange
    };
  }

};
</script>
  
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 250px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.ac {
  width: 250px;
}
</style>